|
1、插件
"jspdf": "^2.3.0",
"html2canvas": "^1.4.1",
2、场景
网页html生成A4大小分页的pdf
3、代码
导出
import htmlToPdf from './export' 所需的js文件
exportPDF() {
const divList = document.getElementsByClassName('pdfpage')
const name = '成绩单' + '_' + '_统计图表'
htmlToPdf.downloadPDF(this.$refs.exportPDF, name, true, divList)
},
##### export.js
import html2canvas from '@nidi/html2canvas'
import JsPDF from 'jspdf'
/**
* @param ele 要生成 pdf 的DOM元素（容器）
* @param padfName PDF文件生成后的文件名字
* */
function downloadPDF(ele, pdfName, ddd = false, list = []) {
let eleW = ele.offsetWidth// 获得该容器的宽
let eleH = ele.offsetHeight// 获得该容器的高
let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
var canvas = document.createElement('canvas')
var abs = 0
let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
if (win_out > win_in) {
// abs = (win_o - win_i)/2; // 获得滚动条长度的一半
abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半
// console.log(a, '新abs');
}
canvas.width = eleW * 2 // 将画布宽&&高放大两倍
canvas.height = eleH * 2
var context = canvas.getContext('2d')
context.scale(2, 2)
context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
if (ddd) {
return func(list, pdfName)
}
//可自动分页（图表会被分页）
setTimeout(()=>{
html2canvas(ele, {
dpi: 300,
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
}).then((canvas) => {
var contentWidth = canvas.width
var contentHeight = canvas.height
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 841.89 * 595.28
//未生成pdf的html页面高度
var leftHeight = contentHeight
//页面偏移
var position = 0
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28
var imgHeight = 595.28 / contentWidth * contentHeight
var pageData = canvas.toDataURL('image/jpeg', 1.0)
var pdf = new JsPDF('', 'pt', 'a4')
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
console.log(imgWidth, imgHeight,'imgWidth, imgHeight','44455kkkk')
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分页
if (ddd) {
for (let i = 0; i < list.length; i++) {
pdf.addPage()
}
}
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
//可动态生成
pdf.save(pdfName)
})
},2000)
}
//可手动分页
async function func(list = [], pdfName) {
let pdf = new JsPDF('l', 'pt', 'a4')
for (let i = 0, l = list.length; i < l; i++) {
let abs = 0
let e = list[i]
let eleW = list[i].offsetWidth
let eleH = list[i].offsetHeight
let eleOffsetTop = list[i].offsetTop
let eleOffsetLeft = list[i].offsetLeft
let c = document.createElement('canvas')
c.width = eleW * 2
c.height = eleH * 2
let ctx = c.getContext('2d')
ctx.scale(2, 2)
ctx.translate(-eleOffsetLeft - abs, -eleOffsetTop)
setTimeout(()=>{
html2canvas(e, {
dpi: 300,
background: '#fff',
logging: true,
useCORS: true,
imageTimeout: 60000,
scrollX: 0,
scrollY: 0,
scale:2,
// async:false,//同步执行
}).then((c) => {
let contentWidth = c.width
let contentHeight = c.height
// 一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 841.89 * 595.28
// 未生成pdf的html页面高度
let leftHeight = contentHeight
// 页面偏移
let position = 0
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var pdfX = (contentWidth + 10) / 2 * 0.75
var pdfY = (contentHeight + 500) / 2 * 0.75 // 500为底部留白
// 设置内容图片的尺寸，img是pt单位
var imgWidth = pdfX;
var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
let pageData = c.toDataURL('image/jpeg', 1.0)
console.log(pageData)
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
// arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight
position -= 595.28
// 避免添加空白页
if (leftHeight > 20) {
// 注②
pdf.addPage()
}
}
}
if (i < l - 1) {
pdf.addPage()
} else {
return pdf.save(pdfName)
}
})
},i * 100)
}
}
export default {
downloadPDF
}
4、问题
1.导出pdf数量较少时，可以正常显示。过多时，显示为全空白
刚开始以为是文件太大导致的，因此使用了pdf.output('datauristring')，发现并没有用。
解决：一直找不到原因，网上关于这个相关问题的解决方案也不是很多，最后在github官网找到最优解决方案。
官网有一个issue：# JSPDF, Not able to download pdf with larger dataset: Browser crashes after sometime. #3481
导致的原因canvas过长导致的，给出的解决方案是将一个html元素进行拆分合并
github.com/parallax/js…
2.导出以后会发生内容跨页
解决：内容的高度才为PDF页面的实际高度，判断分页的依据应该以内容高度为准，
如果canvas的高度小于一页pdf显示html页面生成的canvas高度;就不进行分页，
正常使用addImage方法，否则进行分页处理。
3.导出内容被裁减
对addImage所需的高度宽度进行修改
5、循环问题
在最后进行大量测试以后，发现在数据量较小的时候可以正常导出，但是数据量较大的时候，会偶尔出现导出的
pdf数量丢失，在调试过程中发现转换的html图片数量正常，但是生成pdf后，数量可能会有所丢失。最终在调试过程中发现是因为js事件轮询机制导致，通过循环中同步调用异步的方法解决。
6、其他方案
使用了浏览器自带的方案：window.print()
缺点：数量太多时，加载速度太慢
参考博客及文档
juejin.cn/post/713837…
artskydj.github.io/jsPDF/docs/…
|